<template>
  <div class="dialog">
    <h1>
      提示
    </h1>
    <div class="content">
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
      <p>是</p>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

</script>

<style lang='scss' scoped>
.dialog {
  position: absolute;
  min-height: 400px;
  width: 700px;
  display: flex;
  flex-direction: column;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);


  h1 {
    font-size: 2em;
    background-color: black;
    line-height: 100px;
    height: 100px;
    text-align: center;
    color: #fff;
  }

  .content {
    flex: 1;
    background-color: yellow;
    max-height: calc(100vh - 200px);
    overflow: auto;
  }
}
</style>